<!DOCTYPE html>
<html>

<head>
    <title>作品详情</title>
    <meta charset="utf-8" />
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <script src="web/static/js/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="web/static/js/bootstrap.min.js"></script>
    <style>
        #main-box {
            margin-top: 50px;
        }

        #footer {
            width: 100%;
        }
    </style>
</head>

<body>
    <!--导航-->
    <nav class="navbar navbar-default navbar-fixed-top" style="margin-bottom: 0">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#" style="color: blueviolet">DesignTo</a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a href="homepage.html">首页</a>
                    </li>
                    <li >
                        <a href="theme.html">主题</a>
                    </li>
                    <li>
                        <a href="custom.html">个性化</a>
                    </li>
                </ul>
                <div class="row nav nabbar-nav navbar-right" style="margin-top:.4em">
                    <div class="col-lg-9" style="height:100%">
                        <form class="navabar-form form-inline">
                            <div class="form-grop">
                                <input type="text" class="form-control" placeholder="Search">
                                <button type="submit" class="btn btn-defualt">Submit</button>
                            </div>
                        </form>
                    </div>
                    <ul class="col-lg-3">
                        <li>
                            <button type="button" class="btn btn-defualt">
                                <span class="glyphicon glyphicon-user" aria-hidden="true"></span>User
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
    <!--页面主体-->
    <div class="container-fluid" id="main-box">
        <div class="row">
            <div class="col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2">
                <div class="row" style="background-color:rgba(211, 211, 211, 0.589);height:550px;box-shadow: lightgray 5px 5px 2px;padding:20px;">
                    <!--图片详情一半-->
                    <div class="col-md-5" style="height: 100%;padding-bottom: 20px;">
                        <img src="手稿图/婚纱/手稿9.jpg" class="img-thumbnail" style="margin: 2em;height: 80%;width: 90%;" />
                        <br />
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-md-5 col-md-offset-1" style="vertical-align: middle">
                                    <span class="glyphicon glyphicon-heart" style="color:red;"></span>
                                    1234
                                </div>
                                <div class="col-md-5">
                                    <button class="btn btn-info">喜欢</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--文字详情一半-->
                    <div class="col-md-7">
                        <div class="container-fluid">
                            <div class="row" style="margin-top:2em;">
                                <form class="form-horizontal">
                                    <!--作品标题行-->
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">作品名称：</label>
                                        <div class="col-sm-9">
                                            <p class="form-control-static">AABBCC</p>
                                        </div>
                                    </div>
                                    <!--作品分类行-->
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">作品分类：</label>
                                        <div class="col-sm-9">
                                            <p class="form-control-static">美食</p>
                                        </div>
                                    </div>
                                    <!--作品描述行-->
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">作品描述：</label>
                                        <div class="col-sm-9" style="text-overflow: ellipsis;">
                                            <p class="form-control-static" style="word-break: all;">中文中文中文中文中文中文中文中文中文中文中文AABCBCBJKFL J SF J IEOVIDLKFSDJFEJKSL中文中文中文中文中文中文JFEIOVJDLFHWEF LEHFKJHDSFJK EWFU IH FDJKHF SDJKF HD</p>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">设计师：</label>
                                        <div class="col-sm-9">
                                            <p class="form-control-static" >xhx</p>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">发布时间：</label>
                                        <div class="col-sm-9">
                                            <p class="form-control-static">2018-5-20 00:00:00</p>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <!--底部-->
    <div class="panel-footer text-center" id="footer">
        <h4>DesignTo服装设计服务平台</h4>
        <h5>Designer:
            <span class="glyphicon glyphicon-star" style="color: gold" aria-hidden="true"></span>Star
        </h5>
    </div>
    <!--引入 main.js-->
    <script src="web/static/js/main.js"></script>
</body>

</html>